<template>
  <div>
    <h2>counter初始值: {{ counter }}</h2>
    <h3>counter*2的值: {{ counter }}</h3>
    <button @click="add">累加</button>
  </div>
</template>

<script>
import { ref, toRefs, computed, reactive } from 'vue'
export default {
  setup () {
    const {counter,doubleCount, add} = useCounter()
    return {
      counter,
      doubleCount, 
      add
    }
  }
}

function useCounter () {
  const data = reactive({
    counter: 1,
    doubleCount:  computed(() => data.counter*2)
  })
  function add () {
    data.counter++
  }
  return {
    ...toRefs(data),
    add
  }
}
</script>

<style lang="scss" scoped>

</style>